/*---commun class--------------------------------------------------*/
.left { float: left; }
.right { float: right; }
.bottom { vertical-align: bottom;}

/*---end commun class----------------------------------------------*/

body {
	background: url("/aduc272/w3c/images/bg.jpg");
	background-repeat: no-repeat;	
	/* background-attachment:fixed; */
	background-position: center 0px;
	
	font-family: Arial;
	font-size: 12px;		
}

.cover, .metro {
	padding-top: 27px;
}

/*---cover-------------------------------------------------------*/
.cover {
	margin: auto;
	width: 100%;
	height: 100%;
}
.cover .content_frame {
	position: relative;
	z-index: 272;
	width: 706px;
	height: 290px;
	background: url("/aduc272/w3c/images/cover.png") no-repeat;
	background-position: center;
	
	/*this will be set in javascript when user selects items in metro navigation*/
	/* background-color: #ffffff; */
}

.cover .content {
	height: 0px;	
}

.cover .content div#content {	
	position: relative;
	z-index: 0;
	width: 706px;	
	height: 250px;	
	padding-top: 6px;
}
.cover .content div#caption {
	position: relative;
	z-index: 0;
	width: 676px;
	padding: 4px 15px 0 15px;	
	height: 25px;
	line-height: 20px;
	background-image: url("/aduc272/w3c/images/caption_bg.png");
	font-family: Arial;
	color: white;
	font-weight: bold;
}

/*---end cover---------------------------------------------------*/



/*---metro menu--------------------------------------------------*/
.metro {	
	margin: auto;
	width: 100%;
	height: 100%;		
	text-align: center;
	vertical-align: middle;
}

.nav {
	display: inline-block;
	width: auto;	
	font-weight: bold;
}

.nav .col {
	display: table-cell;
	width: 200px;
	text-align: center;
	vertical-align: top;
}

.nav .small {
	width: 100px !important;
}

/*---item nav--------------------------------------------------*/

.nav .col .item {
	float: left;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;	
	margin: 2px 2px 0 0;
	cursor: pointer;
}

.nav .col .one {
	width: 200px;
	height: 91px;
	line-height: 90px;
}
.nav .col .two {
	width: 99px;
	height: 91px;
	line-height: 90px;	
}
.nav .col .three {
	width: 200px;
	height: 60px;
	line-height: 60px;
}
.nav .col .item a::selection {
	color:#735A3B;
}
.nav .col .item a {
	float: left;
	text-align: center;
	color: #ffffff;	
	margin: 2px 2px 0 0;
	cursor: pointer;
}
.nav .col .one a:hover, .nav .col .two a:hover, .nav .col .three a:hover {
	background-position: center center !important;
}
.nav .col .one a{
	width: 194px;
	height: 85px;
	margin: 3px 3px;
}
.nav .col .one a:hover {
	background: url("/aduc272/w3c/images/hover_one.png") no-repeat;
}

.nav .col .two a{
	width: 93px;
	height: 85px;
	margin: 3px 3px;
}
.nav .col .two a:hover {
	background: url("/aduc272/w3c/images/hover_two.png") no-repeat;
}
.nav .col .three a{
	width: 194px;
	height: 54px;
	margin: 3px 3px;
}
.nav .col .three a:hover {
	background: url("/aduc272/w3c/images/hover_three.png") no-repeat;
}

.cv {
	background-color: #3C7780;	
}

.emage {
	background-color: #1570A5;	
}

.guitar {
	background-color: #F4AF47; /* #6FA014; */	
}

.game {
	background-color: #43B51F;	
}

.film {
	background-color: #C23916;
}

.news {
	background-color: #FF8A00;
}

.html5 {
	background-color: #2D89EE;
}

.template {
	background-color: #9B59BB;
}

.open_web {
	background-color: #FFC809;
}

.coming_soon {
	background-color: #3C7780;
}
/*---end item nav--------------------------------------------------*/








